<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-09-14 11:34
  PageName：menu.html
  Function：实战案例 - 设计菜单样式
  URL：http://localhost:8080/d5_practice_menu/menu.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计菜单样式</title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<!--外层的ui标签控制导航总体样式 -->
<ul class="menu">
    <!-- 内层的li标签控制每个菜单项的样式 -->
    <li class="top"><a href="#" class="top_link"><span>首页</span></a></li>
    <li class="top"><a href="#" class="top_link"><span>我的相册</span></a></li>
    <li class="top"><a href="#" class="top_link"><span>我的日志</span></a></li>
    <li class="top"><a href="#/" class="top_link"><span>我的音乐盒</span></a></li>
    <li class="top"><a href="#" class="top_link"><span>我的介绍</span></a></li>
    <li class="top"><a href="#" class="top_link"><span>留言本</span></a></li>
</ul>
</body>
</html>